<template>
	<!-- <div id="map"></div> -->
	<div>home</div>
</template>

<script setup lang="ts">
import mapboxgl from 'mapbox-gl';
import { PointLayer, Scene } from '@antv/l7';
import { Mapbox } from '@antv/l7-maps';
import { onMounted } from 'vue';
mapboxgl.accessToken =
	'pk.eyJ1IjoiY2hlbndlaWthbmciLCJhIjoiY20zYmt2cHQ3MHBvODJzcTJhMmFtd3Z0ZCJ9.kgGAIRiDOOVRPNg_uzmLkA';
import mapboxLanguage from '@mapbox/mapbox-gl-language';

let map = null;
function initMap() {
	map = new Mapbox({
		zoom: 10,
		minZoom: 0,
		maxZoom: 18,
		token:
			'pk.eyJ1Ijoic2tvcm5vdXMiLCJhIjoiY2s4dDBkNjY1MG13ZTNzcWEyZDYycGkzMyJ9.tjfwvJ8G_VDmXoClOyxufg',
		projection: 'globe'
	});
	const scene = new Scene({
		id: 'map',
		map: map,
		logoVisible: false
	});
	scene.on('loaded', () => {
		fetch('https://gw.alipayobjects.com/os/basement_prod/893d1d5f-11d9-45f3-8322-ee9140d288ae.json')
			.then((res) => res.json())
			.then((data) => {
				const pointLayer = new PointLayer({
					autoFit: true
				})
					.source(data, {
						parser: {
							type: 'json',
							x: 'longitude',
							y: 'latitude'
						}
					})
					.shape('name', [
						'circle',
						'triangle',
						'square',
						'pentagon',
						'hexagon',
						'octogon',
						'hexagram',
						'rhombus',
						'vesica'
					])
					.size('unit_price', [10, 25])
					.color('name', ['#5B8FF9', '#5CCEA1', '#5D7092', '#F6BD16', '#E86452'])
					.style({
						opacity: 1,
						strokeWidth: 2
					});
				scene.addLayer(pointLayer);
			});
	});
	// 设置中文
	// mapboxgl.setRTLTextPlugin(
	//   "https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-rtl-text/v0.1.0/mapbox-gl-rtl-text.js"
	// );
	// let language = new mapboxLanguage({ defaultLanguage: "zh-hans" });
	// map.addControl(language);
}
//在组件挂载后初始化地图
onMounted(() => {
	// initMap();
	// const map = new mapboxgl.Map({
	//   container: 'map', // container ID
	//   style: 'mapbox://styles/mapbox/streets-v12', // style URL dark-v10
	//   center: [114, 35], // starting position [lng, lat]
	//   zoom: 9, // starting zoom
	//   projection:'globe'
	// });
	// const scene = new Scene({
	//   id: 'map',
	//   map: new Mapbox({
	//     mapInstance: map,
	//   }),
	//   logoVisible: false // 不显示antv-l7的logo
	// });
	// //地图样式加载完后
	// map.on('style.load', () => {
	//   //添加中国的南海领域边界
	//   map.setFog({});
	//   // 消除边界
	//   map.setFilter("admin-0-boundary-disputed", [
	//     "all",
	//     ["==", ["get", "disputed"], "true"],
	//     ["==", ["get", "admin_level"], 0],
	//     ["==", ["get", "maritime"], "false"],
	//     ["match", ["get", "worldview"], ["all", "CN"], true, false],
	//   ]);
	//   map.setFilter("admin-0-boundary", [
	//     "all",
	//     ["==", ["get", "admin_level"], 0],
	//     ["==", ["get", "disputed"], "false"],
	//     ["==", ["get", "maritime"], "false"],
	//     ["match", ["get", "worldview"], ["all", "CN"], true, false],
	//   ]);
	//   map.setFilter("admin-0-boundary-bg", [
	//     "all",
	//     ["==", ["get", "admin_level"], 0],
	//     ["==", ["get", "maritime"], "false"],
	//     ["match", ["get", "worldview"], ["all", "CN"], true, false],
	//   ]);
	// });
});
</script>

<style scoped lang="scss"></style>
